<template>
	<div class="wechart-login-wrapper" :class="{'login':page==='login','register':page==='register'}">
		<div class="tip">
			<div class="line"></div>
			<div class="title">{{title}}</div>
			<div class="line"></div>
		</div>
		<div class="login-methods">
			<div class="wechat login">
				<image @click="appWxLogin" class="image" src="/static/icon-wechart.png" mode="widthFix"></image>
			</div>
			<div class="wechat register">
				<image @click="appWxLogin" class="image" src="/static/icon-wechart-register.png" mode="widthFix"></image>
			</div>
		</div>
		<popup-tip ref="pupuptip" title="输入手机号" type="input" placeholder="请输入手机号码" @popupConfirm="popupConfirm">
		</popup-tip>
	</div>
</template>

<script>
	import {
		mapMutations,
		mapActions
	} from "vuex"
	import {
		mobile
	} from "@/utils/RegExp.js";
	import {
		AppWechatLogin,
		AppWechatRegister,
		CodetoUnionid,
		GetUnionid
	} from "@/api/login.js"
	import storage from "@/utils/storage.js";
	import PopupTip from "@/components/popup-tip.vue"
	export default {
		name: "login-wechat",
		components: {
			PopupTip
		},
		props: {
			title: {
				default: '其他方式登录'
			},
			page: {
				default: ''
			}
		},
		mounted() {

		},
		data() {
			return {
				weixinAuthService: null,
			};
		},
		methods: {
			...mapMutations(["SetUserInfo"]),
			...mapActions(["ActionUserList"]),
			getUserProfile(e) {
				let that = this;
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				uni.getUserProfile({
					desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						let iv = res.iv;
						let encryptedData = res.encryptedData;
						this.appWxLogin({
							iv,
							encryptedData
						})
					},
					fail: (res) => {

					},
				});
			},
			appWxLogin(params) {
				let that = this;
				//#ifdef APP-PLUS
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						console.log(res);
						//支持微信、qq和微博等
						if (~res.provider.indexOf('weixin')) { //用户拥有微信是才回进行一下操作
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									console.log('-------获取openid(unionid)-----');
									console.log(loginRes);
									let openid = loginRes.authResult.openid;
									let unionid = loginRes.authResult.unionid;
									that.params = {
										"openid": openid,
										"unionIds": unionid
									}
									AppWechatLogin(that.params).then((res) => {
										console.log(res)
										if (res.data.code === 500) {
											that.$refs.pupuptip
												.tipshow = true
											return;
										}
										let info = res.data.data
										storage.setToken(info.token);
										storage.setUserInfo(info.user)
										that.ActionUserList({
											...info,
											type: 'login'
										})
									})
								},
								fail(res) {
									console.log(res)
								}
							});
						} else {
							uni.showToast({
								title: "请先安装微信",
								duration: 1000,
								icon: "none"
							})
						}
					},
				});
				// #endif
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						console.log('code>>>', loginRes.code);
						GetUnionid({
							code: loginRes.code
						}).then((codeRes) => {
							//获取unionid信息
							if (codeRes.data && codeRes.data.data.unionid) {
								let unionid = codeRes.data.data.unionid;
								let openid = codeRes.data.data.openid;
								that.params = {
									"openid": openid,
									"unionIds": unionid
								}
								AppWechatLogin(that.params).then((res) => {
									if (res.data.code === 500) {
										that.$refs.pupuptip
											.tipshow = true
										return;
									}
									let info = res.data.data
									storage.setToken(info.token);
									storage.setUserInfo(info.user)
									that.ActionUserList({
										...info,
										type: 'login'
									})
								})
							}
						})
					}
				});
				// #endif
			},
			popupConfirm(text) {
				let that = this
				if (text === '') {
					uni.showToast({
						title: "请输入手机号",
						icon: "none"
					})
					return
				}
				if (mobile.test(text) === false) {
					uni.showToast({
						title: "手机号码格式不正确",
						icon: "none"
					})
					return;
				}
				AppWechatRegister({
					...that.params,
					uphone: text,
					unionid: '1'
				}).then((res) => {
					console.log(res)
					if (res.data.code === 500) {
						uni.showToast({
							title: res.data.msg,
							icon: "none"
						})
						return;
					}
					that.$refs.pupuptip.tipshow = false
					let info = res.data.data
					storage.setToken(info.token);
					storage.setUserInfo(info.user)
					that.ActionUserList({
						...info,
						type: 'login'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.wechart-login-wrapper {
		&.login {
			.tip {
				.line {
					background-color: #ffffff42;
				}

				.title {
					color: rgba(255, 255, 255, 0.84);
				}
			}

			.login-methods {
				.login {
					display: block;
				}

				.register {
					display: none;
				}
			}
		}

		&.register {
			.tip {
				.line {
					background-color: rgb(114, 215, 204);
				}

				.title {
					color: rgb(114, 215, 204);
				}
			}

			.login-methods {
				.login {
					display: none;
				}

				.register {
					display: block;
				}
			}
		}

		.tip {
			display: flex;
			align-items: center;

			.line {
				flex: 1;
				height: 2upx;
			}

			.title {
				padding: 0 30upx;
				font-size: 32upx;

				font-weight: bold;
				letter-spacing: 8upx;
			}

		}

		.login-methods {
			display: flex;
			justify-content: space-around;
			padding: 50upx 0 68upx 0;

			.wechat {
				background-color: transparent;

				.image {
					width: 100upx;
				}
			}
		}
	}
</style>
